<template lang="">
  <div>
        <elBread></elBread>
        <el-button @click="addDialog" class="xb" type="primary" size="small"  plain>添加</el-button>
         <!-- 列表展示表格 -->
          <list @edit="edit"></list>
           <!-- 弹框的展示 -->
          <Dialog ref="diainfo" @cancel="cancel" :isShow="isShow" :isAdd="isAdd"></Dialog>
  </div>
</template>
<script>
import list from './list.vue'
import Dialog from './dialog.vue'
export default {
    data() {
        return {
            isShow: false,//用来控制弹框的显示隐藏
            isAdd: true,//true 添加
        };
    },
    components: {
        list,
        Dialog
    },
    methods: {
        //封装一个打开弹框的事件
        addDialog() {
            //让弹框显示
            this.isShow = true
            //告诉弹框你是一个添加
            this.isAdd = true
        },
        //子组件要修改父的弹框显示状态
        cancel(e) {
            this.isShow = e
        },
        //edit封装编辑打开弹框
        edit(e) {
            this.isShow = true
            //告诉弹框你是一个编辑
            this.isAdd = false
            this.$refs.diainfo.lookup(e)
        }
    }
};
</script>
<style  lang="less" scoped>
.xb {
    margin: 10px 5px;
}
</style>